<template>
  <div v-if="isVisible" class="image-modal" @click="closeModal">
    <div style="display: flex;align-items: center;background: #000;justify-content: space-between;height: 50px;position: relative;">
      <img src="~/static/jiantou.png" alt="" style="width: 25px;height: 25px;position: absolute;left: 0;top: 24%;object-fit: cover;">
      <div style="color: #FFFFFF;margin: 0 auto;">{{ current+1 }}/{{imageSrc.length}}</div>
    </div>
    <van-swipe  @change="onChange"  style="display: flex;">
            <van-swipe-item v-for="(item, index) in imageSrc" :key="index" >
                <img :src="item"
                :style="{ width: '100%',  height: type == 2 ? '210px' : '100vh','object-fit': 'cover',margin:type == 2? '40% auto':'0 auto',objectFit: 'cover'}"
               />
            </van-swipe-item>
            <template #indicator>
                <div></div>
            </template>
        </van-swipe>
      <!-- <div  class="scroll-container" >
                  <div v-for="(item, index) in imageSrc" :key="index"  @change="onChange"
                 class="scroll-item"  @click="closeModal">
                  <img  :src="item" alt="" 
                  :style="getImageStyle()"  />
                </div>
              </div> -->
  </div>
</template>

<script>
import number from 'core-js/core/number';

export default {
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    imageSrc: {
      type: Array,
      default: ''
    },
    type: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      current: 0,
    }
  },
  watch: {
    isVisible: function (val) {
      if (val) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = '';
      }
    }
  },
  mounted() {
    document.body.style.overflow = 'hidden';
  },
  methods: {
    closeModal() {
         this.$showImageModalsss()
         
    },
    closeModalOnImageClick(event) {
      event.stopPropagation(); 
    },
    onChange(index) {
      this.current = index;
    },
    getImageStyle(){
      if ( this.type == 1) {
        // 竖图
        return {
          width: '100vw',
          height: '100vh',
          objectFit: 'cover',
          borderRadius: '12px'
        };
      } else if (this.type == 2) {
        // 横图
        return {
          width: '93VW',
          height: '100%',
          objectFit: 'cover',
          borderRadius: '12px',
          margin:"50%"
        };
      }
    }
  }
}
</script>

<style scoped>
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #000;
}

.scroll-container {  
  display: flex;  
  align-items: center;  
  overflow-x: auto;  
  white-space: nowrap;  
  scrollbar-width: none;  
  scroll-snap-type: x mandatory;  
  -ms-overflow-style: none;  
  justify-content: center;
} 
    .scroll-item {  
  margin: 12px;   
  scroll-snap-align: start;  

}
</style>
